<template>
    <div class="index-sale box pa-20">
        <!--特卖-->
        <ul>
            <li v-for="(item,index) in saleItem" :key="index">
                <router-link to="">
                    <div class="img-box">
                        <img :src="item.img">
                        <p>
                            <span>{{item.djs}}</span>
                        </p>
                    </div>
                    <div class="main-box">
                        <div class="name-box">
                            <div class="multi-line">
                                {{item.name}}
                            </div>
                            <div class="tag-box only-1">
                                <span v-for="(i , key) in item.tag" :key="key">{{i}}</span>
                            </div>
                        </div>
                        <div class="flex-box">
                            <p><span>¥<b>{{item.price}}</b></span>
                                <del v-if="item.oldPrice > 0">¥{{item.oldPrice}}</del>
                            </p>
                        </div>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    import img from '@/assets/temporary/index200.png';//特卖图片
    function InitTime(endtime) {
        var hh, mm, ss = null;
        var time = parseInt(endtime) - new Date().getTime();
        if (time <= 0) {
            return '活动已结束'
        } else {
            hh = Math.floor((time / 60 / 60));
            mm = Math.floor((time / 60) % 60);
            ss = Math.floor(time % 60);
            var str = "距结束:" + ":" + hh + ":" + mm + ":" + ss;
            return str;
        }
    }
    export default {
        name: "index",
        data(){
            return{
                // 特卖
                saleItem: '',
            }
        },
        mounted() {
            setInterval(() => {
                for (var key in this.list) {
                    var aaa = parseInt(this.list[key].time);
                    var bbb = new Date().getTime();
                    var rightTime = aaa - bbb;
                    if (rightTime > 0) {
                        var hh = Math.floor((rightTime / 1000 / 60 / 60));
                        var mm = (Math.floor((rightTime / 1000 / 60) % 60) < 10) ? '0' + Math.floor((rightTime / 1000 / 60) % 60) : Math.floor((rightTime / 1000 / 60) % 60);
                        var ss = (Math.floor((rightTime / 1000) % 60) < 10) ? "0" + Math.floor((rightTime / 1000) % 60) : Math.floor((rightTime / 1000) % 60);
                        this.list[key]["djs"] = "距结束:" + hh + ":" + mm + ":" + ss;
                    } else {
                        this.list[key]["djs"] = '活动已结束'
                    }

                }
            }, 1000);

        },
        //离开页面后清除定时器
        destroyed() {
            clearInterval()
        },
        created() {
            let saleAllItem = [
                {img, time: "1585753270350", name: '新乡八里沟景区门票', price: '85', oldPrice: '90',tag:['游乐场','热门']},
                {img, time: "1570041118162", name: '新乡八里沟景区门票', price: '85', oldPrice: '',tag:['游乐场','热门']}
            ]
            saleAllItem.map(obj => {
                this.$set(
                    obj, "djs", InitTime(obj.time)
                );
            })
            this.list = saleAllItem;
            this.saleItem = saleAllItem
        },
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/css/public";
    .index-sale {
        ul{
            li{
                padding: vw(20) 0 vw(30);
                border-bottom: 1px solid $gray_bg;
                a{
                    display: flex;
                    justify-content: space-between;
                    .img-box{
                        position: relative;
                        width: vw(220);
                        -webkit-border-radius: vw(10);
                        -moz-border-radius: vw(10);
                        border-radius: vw(10);
                        overflow: hidden;
                        p{
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: vw(42);
                            background: $gradientBg;
                            font-size: vw(20);
                            color: #fff;
                            line-height: vw(42);
                            text-align: center;
                        }
                    }
                    .main-box {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        flex: 1;
                        padding: 0 vw(20);
                        overflow: hidden;
                        .multi-line {
                            line-height: vw(42);
                            font-weight: 600;
                            -webkit-line-clamp: 2;
                        }
                    }

                    .flex-box{
                        p{
                            color: $org_font;
                            font-size: vw(28);
                            b{
                                font-size: vw(42);
                            }
                        }
                        del{
                            color: #999;
                            font-size: vw(20);
                        }
                    }
                    .tag-box{
                        span{
                            height: vw(28);
                            margin-right: vw(10);
                            padding: 0 vw(10);
                            border: 1px solid $green;
                            color: $green;
                            font-size: vw(20);
                            line-height: vw(28);
                            -webkit-border-radius: vw(6);
                            -moz-border-radius: vw(6);
                            border-radius: vw(6);
                        }
                    }
                }
            }
        }
    }
</style>